<template>
  <el-dialog width="1400px" :title="isEdit?$t('m.out.pickingWave'):$t('m.out.waveorder')" :visible.sync="popupVisible" :before-close="close">
    <el-row :gutter="30" class="waveHead">
      <el-col :span="8">
        <b>{{$t('m.out.waveordercode')}}:</b>
        <span>{{detail.waveordercode}}</span>
      </el-col>
      <el-col :span="8">
        <b>{{$t('m.state')}}:</b>
        <span>{{detail.state}}</span>
      </el-col>
      <el-col :span="8">
        <b>{{$t('m.createdate')}}:</b>
        <span>{{detail.createdate|dateFilter}}</span>
      </el-col>
    </el-row>
    <el-table empty-text fits class="waveTable" ref="waveTable" :span-method="objectSpanMethod" :data="tableData">
      <el-table-column align="center" prop="__index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" width="150" prop="ordercode" :label="$t('m.in.ordernumber')"></el-table-column>
      <el-table-column align="center" prop="tasknumber" label="TaskNmuber"></el-table-column>
      <el-table-column align="center" prop="ptdstate" :label="$t('m.out.state')">
        <template slot-scope="scope">{{scope.row.ptdstate|stateFilter(lan)}}</template>
      </el-table-column>
      <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
      <el-table-column align="center" prop="suppliercode" label="SupplierCode"></el-table-column>
      <el-table-column align="center" prop="productname" :label="$t('m.in.productname')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')"></el-table-column>
      <el-table-column align="center" prop="quantity" :label="$t('m.out.quantity')"></el-table-column>
      <el-table-column align="center" prop="state" :label="$t('m.state')">
        <template slot-scope="scope">
          <!-- 1.正常; 20.已取消-->
          {{[$t('m.transposing.limit3'),$t('m.pick.state10')][[1,20].indexOf(scope.row.state)]}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.out.tsareaid')" prop="tsareaid">
        <template slot-scope="scope">
          <template v-if="isEdit">
            <el-select @change="triggerSelect" v-model="scope.row.tsareaid" :placeholder="$t('m.choose')" filterable>
              <el-option v-for="item in tsareaOptions" :key="item.tsareaid" :label="item.tsareacode" :value="item.tsareaid" :disabled="item.isSelected"></el-option>
            </el-select>
          </template>
          <span v-else>{{scope.row.tsareacode}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="btns">
      <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
      <el-button v-if="isEdit" size="mini" type="primary" @click="saveArea" :loading="btnLoading">{{$t('m.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name:'wave-popup',
  props:['popupVisible', 'isEdit', 'detail'],
  data(){
    return {
      tableData:[],
      getMergeRows:[], // 获取table的合并行信息
      tsareaOptions:[], // 分拣位置

      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  mounted(){
    // 分配分拣位才请求接口
    if (this.isEdit) this.getTsrea()

    let waveOrderList = this.cloneObject(this.detail.waveorderDetailOutput)
    // 格式化数据
    waveOrderList.map((item, index) => {
      item.waveorderdetailList.map((__item) => {
        this.tableData.push(Object.assign({}, __item, { __index:index + 1, ordercode:item.ordercode, tsareacode:item.tsareacode || '', tsareaid:item.tsareaid || '' }))
      })
    })
    let __index = 0
    let code = ''
    this.getMergeRows = []
    this.tableData.forEach((item, index) => {
      if (item.ordercode !== code){
        this.getMergeRows.push(1)
        code = item.ordercode
        __index = index
      } else {
        if (code){
          ++this.getMergeRows[__index]
          this.getMergeRows.push(0)
        }
      }
    })
  },
  filters:{
    stateFilter(val, lan){
      let result = ''
      switch (val){
      case 1: result = lan('m.out.state2'); break
      case 3: result = lan('m.pick.state3'); break
      case 9: result = lan('m.pick.state9'); break
      case 20: result = lan('m.pick.state10'); break
      }
      return result
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    triggerSelect(){
      this.tsareaOptions.forEach(v => {
        this.tableData.forEach(e => {
          if (v.tsareaid === e.tsareaid){
            v.isSelected = true
          } else {
            v.isSelected = false
          }
        })
      })
    },
    close(){
      this.$emit('close')
      this.$emit('callback')
    },
    // 获取分拣位置
    getTsrea(){
      this.$axios({
        method:'get',
        url:'/tsarea/list'
      }).then(({ data }) => {
        this.tsareaOptions = data.filter(v => v.type === 2)
        this.tsareaOptions.forEach(v => {
          v.isSelected = false
        })
      })
    },
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [0, 1, 11]
      if (MergeArr.includes(columnIndex)){
        if (!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    },
    // 确认分配分拣位置
    saveArea(){
      let isSelected = true
      let index = 0
      for (let i = 0;i < this.getMergeRows.length;i++){
        if (this.getMergeRows[i] && !this.tableData[i].tsareaid){
          index = i
          isSelected = false
          break
        }
      }
      if (!isSelected) return this.callbackMessage(`【${this.tableData[index].ordercode}】${this.$t('m.choose')}${this.$t('m.out.pickarea')}`)

      let tsreaData = []
      let data = []
      // 获取分配分拣位信息
      for (let i = 0;i < this.getMergeRows.length;i++){
        if (this.getMergeRows[i]){
          let tsareaid = this.tableData[i].tsareaid
          let { tsareacode } = this.tsareaOptions.find((item) => item.tsareaid === tsareaid)
          tsreaData.push({ tsareaid, tsareacode })
        }
      }
      // 合并成接口需要的数据
      let { waveordercode, waveorderid } = this.detail
      for (let i = 0;i < this.detail.waveorderDetailOutput.length;i++){
        let { ordercode } = this.detail.waveorderDetailOutput[i]
        data.push(Object.assign({ waveordercode, waveorderid }, { ordercode }, tsreaData[i]))
      }
      let options = {
        method:'post',
        url:`/waveorder/handleWaveorder/${waveorderid}`,
        data
      }
      this.btnLoading = true
      this.$axios(options).then(() => {
        this.callbackMessage(this.$t('m.out.distribute'), 'success', 2000, ()=>{
          this.btnLoading = false
          this.$emit('callback')
          this.close()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>